<template>
  <div class="randoms-container">
    <el-card class="box-card">
      <!-- 头部关键词搜索框---------------------------------------------------------- -->
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <el-form ref="form" label-width="80px">
            <el-form-item label="关键字">
              <el-input
                v-model="keyword"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">
          <el-button size="small" @click="clearKeyword">清除</el-button>
          <el-button type="primary" size="small" @click="searchKeyword">搜索</el-button>
        </el-col>
      </el-row>
      <!-- 数据提示---------------------------------------------------------- -->
      <el-alert :title="'数据一共'+queryInfo.counts+'条'" type="info" show-icon :closable="false" id="alertInfo">
      </el-alert>
      <!-- 搜索结果表格---------------------------------------------------------- -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="220"> </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="80"
          :formatter="typeForm"
        >
        </el-table-column>
        <el-table-column label="题目编号" width="220">
          <template v-slot="{ row }">
            <el-button
            @click="showPreview(item)"
              type="text"
              v-for="item in row.questionIDs"
              :key="item.number"
              id="questionId"
              >{{ item.number }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot='{row}'>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delData(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页--------------------------------------------------------------------- -->
      <el-pagination
        id="pagintation"
        background
        layout="prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(queryInfo.page)"
        :total="Number(queryInfo.counts)"
        :page-size="Number(queryInfo.pagesize)"
        :page-sizes="[20, 30, 50, 100]"
      >
      </el-pagination>
    </el-card>
<!-- 试题预览 --------------------------------------------->
    <QuestionsPreview
      :showDialog.sync="showDialog"
      :questionType="previewType"
      :previewData="previewData"
    ></QuestionsPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview'

export default {
  data () {
    return {
      tableData: [],
      queryInfo: {
        page: 1, // 当前页数
        pagesize: 20,
        counts: null // 总数据数
      },
      keyword: null,
      showDialog: false,
      previewType: null,
      previewData: {}
    }
  },
  components: { QuestionsPreview },
  created () {
    this.getRandoms()
  },
  methods: {
    // 获取表格数据
    async getRandoms () {
      const { data } = await randoms(this.queryInfo)
      this.tableData = data.items
      const { items, ...others } = data
      this.queryInfo = others
      const pages = Math.ceil(+data.counts / +data.pagesize)
      if (data.page > pages) {
        this.handleCurrentChange(pages)
      }
    },
    // 题型过滤
    typeForm (row, col, val) {
      return questionType.find(item => item.value === +val).label
    },
    // 改变每页的条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.getRandoms()
    },
    // 改变当前多少页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.page = val
      this.getRandoms()
    },
    // 点击清除关键字
    clearKeyword () {
      this.keyword = ''
      this.getRandoms()
    },
    // 点击搜索关键字
    searchKeyword () {
      this.queryInfo = { ...this.queryInfo, keyword: this.keyword }
      this.getRandoms()
    },
    // 点击删除按钮
    async delData (row) {
      try {
        await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 点击确定
        await removeRandoms(row)
        // 删除成功
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getRandoms()
      } catch (err) {
        // 点击取消
        console.log('已取消删除')
      }
    },
    // 点击显示预览
    async showPreview (item) {
      // 根据id查询详情信息
      const { data } = await detail(item)
      this.previewData = data
      this.previewType = data.questionType
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
.randoms-container {
  margin: 10px 10px;
  #questionId {
    font-weight: normal;
    margin: 0;
    padding: 0;
  }
  #pagintation{
    float: right;
    margin: 16px 10px;
  }
  ::v-deep .el-pagination__jump {
     margin-left: 0!important;
  }
  #alertInfo{
    margin-bottom: 14px;
  }
}

::v-deep .el-table th.is-leaf {
  background-color: #FAFAFA !important;
  border-bottom: #E8E8E8 2px solid !important;
}
</style>
